<template>
  <div class="o-top-bar">
    <div class="o-title">
      <div class="left">
        <div class="nav-item" @mouseleave="handleTool('hide')">
          <div
            class="nav-text"
            @mouseover="handleTool(1)"
            :class="{ 'is-active': activeNavItem === 1 }"
          >
            系统工具
          </div>
          <transition name="el-zoom-in-top">
            <SystemToolDialog :dialogVisible="isToolShow" v-if="isToolShow" />
          </transition>
        </div>
        <div class="nav-item" @mouseleave="handleTool('hide')">
          <div
            class="nav-text"
            :class="{ 'is-active': activeNavItem === 2 }"
            @mouseover="handleTool(2)"
          >
            快捷定位
          </div>
          <transition name="el-zoom-in-top">
            <QuickPosition
              :dialogVisible="isPositionShow"
              v-if="isPositionShow"
            />
          </transition>
        </div>
      </div>
      <div class="center">太湖度假区水司管网地理信息系统</div>
      <div class="right" @mouseleave="handleTool('hide')">
        <div class="nav-item" @mouseleave="handleTool('hide')">
          <div
            class="nav-text"
            :class="{ 'is-active': activeNavItem === 3 }"
            @mouseover="handleTool(3)"
          >
            运行管理
          </div>
          <transition name="el-zoom-in-top">
            <EquipmentManage :dialogVisible="isEquipShow" v-if="isEquipShow" />
          </transition>
        </div>
        <div class="nav-item" @mouseleave="handleTool('hide')">
          <div
            class="nav-text"
            :class="{ 'is-active': activeNavItem === 4 }"
            @mouseover="handleTool(4)"
          >
            业务管理
          </div>
          <transition name="el-zoom-in-top">
            <PipelineAnalysis :dialogVisible="isPipeShow" v-if="isPipeShow" />
          </transition>
        </div>
      </div>
      <div
        class="userName"
        style="
          color: rgb(255, 255, 255);
          font-size: 20px;
          margin-top: 40px;
          cursor: pointer;
        "
        @mouseleave="handleTool('hide')"
      >
        <div class="nav-text" @mouseover="handleTool(5)">{{ userName }}</div>
        <transition name="el-zoom-in-top">
          <adminManage
            :dialogVisible="isAdminShow"
            v-if="isAdminShow"
          ></adminManage>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import SystemToolDialog from "./SystemTool/SystemToolDialog.vue";
import QuickPosition from "./QuickPosition/QuickPosition.vue";
import EquipmentManage from "./EquipmentManagement/EquipmentManage.vue";
import PipelineAnalysis from "./PipelineAnalysis/PipelineAnalysis.vue";
import adminManage from "./adminManage/adminManage.vue";
import moment from "moment";
export default {
  name: "OTopBar",
  components: {
    SystemToolDialog,
    QuickPosition,
    EquipmentManage,
    PipelineAnalysis,
    adminManage,
  },
  data() {
    return {
      dateTimeNow: "",
      userName: "",
      //控制系统工具按钮显隐
      isToolShow: false,
      //控制快捷定位按钮显隐
      isPositionShow: false,
      //控制设备管理按钮显隐
      isEquipShow: false,
      //控制管网分析按钮显隐
      isPipeShow: false,
      isAdminShow: false,
      activeNavItem: null,
    };
  },
  computed: {},
  mounted() {
    this.userName = JSON.parse(localStorage.getItem("userInfo")).username;
    this.dateTimeNow = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
  },
  watch: {},
  methods: {
    handleTool(index) {
      // console.log(index, "checkindex");
      if (index == "hide") {
        this.activeNavItem = 0;
        this.$store.commit("setisToolShow", false);
        this.$store.commit("setisPositionShow", false);
        this.$store.commit("setisEquipShow", false);
        this.$store.commit("setisPipeShow", false);
        this.$store.commit("setisAdminShow", false);
        return;
      }
      if (this.activeNavItem == index) {
        switch (index) {
          case 1:
            this.$store.commit("setisToolShow", true);
            return;
            break;
          case 2:
            this.$store.commit("setisPositionShow", true);
            return;
            break;
          case 3:
            this.$store.commit("setisEquipShow", true);
            return;
            break;
          case 4:
            this.$store.commit("setisPipeShow", true);
            return;
            break;
          case 5:
            this.$store.commit("setisAdminShow", true);
            return;
            break;
          default:
        }
      }
      this.activeNavItem = index;
      switch (index) {
        case 1:
          this.isToolShow = !this.isToolShow;
          this.$store.commit("setisToolShow", true);
          this.isPositionShow = false;
          this.isEquipShow = false;
          this.isAdminShow = false;
          this.isPipeShow = false;
          break;
        case 2:
          this.isToolShow = false;
          this.isPositionShow = !this.isPositionShow;
          this.$store.commit("setisPositionShow", true);
          this.isEquipShow = false;
          this.isAdminShow = false;
          this.isPipeShow = false;
          this.$store.commit("setShowCutArea", false);
          this.$store.commit("setShowMakePic", false);
          break;
        case 3:
          this.isToolShow = false;
          this.$store.commit("setisEquipShow", true);
          this.isPositionShow = false;
          this.isEquipShow = !this.isEquipShow;
          this.isAdminShow = false;
          this.isPipeShow = false;
          this.$store.commit("setShowCutArea", false);
          this.$store.commit("setShowMakePic", false);
          break;
        case 4:
          this.isToolShow = false;
          this.isPositionShow = false;
          this.$store.commit("setisPipeShow", true);
          this.isEquipShow = false;
          this.isAdminShow = false;
          this.isPipeShow = !this.isPipeShow;
          this.$store.commit("setShowCutArea", false);
          this.$store.commit("setShowMakePic", false);
          break;
        case 5:
          this.isToolShow = false;
          this.isPositionShow = false;
          this.$store.commit("setisAdminShow", true);
          this.isEquipShow = false;
          this.isPipeShow = false;
          this.isAdminShow = !this.isAdminShow;
          this.$store.commit("setShowCutArea", false);
          this.$store.commit("setShowMakePic", false);
          break;
        default:
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.o-top-bar {
  // position: absolute;
  width: 100%;
  z-index: 999;
}
.bg {
  display: block;
  width: 100%;
  height: 120px;
  z-index: 2;
}

.o-title {
  width: 100%;
  display: flex;
  background-image: url("@/assets/top-bar/top_bar_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  .left {
    width: 30%;
    display: flex;
    margin-top: 30px;
    justify-content: flex-end;
  }
  .center {
    cursor: default;
    margin-top: 1rem;
    width: 40%;
    font-size: 30px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 10px rgba(0, 200, 244, 1);
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    font-family: "庞门正道标题体免费版 Bold", "庞门正道标题体免费版 常规",
      "庞门正道标题体免费版", sans-serif;
  }
  .right {
    width: 20%;
    display: flex;
    margin-top: 30px;
    justify-content: flex-end;
  }
  .userName {
    color: rgb(255, 255, 255);
    font-size: 20px;
    margin-top: 40px;
    cursor: pointer;
    width: 10%;
  }

  .nav-item {
    position: relative;
    font-family: "阿里巴巴普惠体 Medium", "阿里巴巴普惠体", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    color: #ffffff;
    padding: 5px 0 0 0;
    //
    text-align: center;
    .nav-text {
      cursor: pointer;
      background-image: url("@/assets/top-bar/nav_bg_normal.png");
      // background-color: #285383;
      width: 145px;
      height: 34px;
      margin-right: 2rem;
      padding-top: 10px;
      background-size: 100% 100%;
      box-sizing: border-box;
      line-height: 0.8rem;
    }
    .is-active {
      /* 激活状态的样式 */
      background-image: url("@/assets/top-bar/act_nav_left.png");
      color: white;
    }
  }
  .nav-item > .nav-text:hover {
    background-image: url("@/assets/top-bar/act_nav_left.png");
    color: white;
  }

  // .center {
  //   height: 4vh;
  //   word-break: keep-all;
  //   margin: 10px 150px;
  //   // width: 590px;
  //   color: #fff;
  //   text-shadow: 0px 0px 10px rgba(0, 200, 244, 1);
  //   font-size: 30px;
  //   font-weight: 700;
  //   text-align: center;
  //   font-family: "庞门正道标题体免费版 Bold", "庞门正道标题体免费版 常规",
  //     "庞门正道标题体免费版", sans-serif;
  // }
}
</style>
